import { _decorator, Component, easing, Label, Node, sp, Sprite, SpriteFrame, Tween, tween, v3 } from 'cc';
import { BaseViewCmpt } from '../../Frame/Script/Base/baseViewCmpt';
import { App } from '../app';
import { ViewName } from '../../Frame/Script/const/viewNameConst';
import { ResLoadHelper } from '../../Frame/Script/resLoadHelper';
const { ccclass, property } = _decorator;

@ccclass('VsViewManager')
export class VsViewManager extends BaseViewCmpt {

    private p1: Node = null;
    private p2: Node = null;
    private p3: Node = null;
    private p4: Node = null;
    private p_left: Node = null;
    private p_right: Node = null;
    private vs_node: Node = null;
    private anim_fx_vs: sp.Skeleton = null;
    private anim_vs: sp.Skeleton = null;

    protected onLoad(): void {
        super.onLoad();
        this.p1 = this.viewList.get("content/left/bg/p1");
        this.p2 = this.viewList.get("content/left/bg/p2");
        this.p3 = this.viewList.get("content/right/bg/p3");
        this.p4 = this.viewList.get("content/right/bg/p4");
        this.p_left = this.viewList.get("content/left");
        this.p_right = this.viewList.get("content/right");
        this.vs_node = this.viewList.get("content/vs");
        this.vs_node.active = false;
        this.anim_fx_vs = this.viewList.get("anim_fx_vs").getComponent(sp.Skeleton);
        this.anim_vs = this.viewList.get("anim_vs").getComponent(sp.Skeleton);
    }

    protected start(): void {
        this.updatePlayerInfo();
        this.playPlayerAnim();
        this.scheduleOnce(this.enterGame.bind(this), 1); //0.66
    }

    private updatePlayerInfo() {
        let seats = App.gameData.getGameSeats();
        let people_num = App.gameData.getPeopleNum();
        const posXList = [-50, 110, -110, 50];
        for (let i = 0; i < 4; i++) {
            let seat_data = seats[i];
            let seatId = i + 1;
            let p: Node = this["p" + seatId];
            let posX = people_num === 2 ? 0 : posXList[i];
            p.setPosition(v3(posX, 0, 0));
            let nameLabel = p.getChildByName("nameLabel").getComponent(Label);
            let head_spr = p.getChildByName("mask").children[0].getComponent(Sprite);
            let head_default = p.getChildByName("mask").children[1];
            if (seat_data.user) {
                p.active = true;
                nameLabel.string = seat_data.user.name;
                head_default.active = false;
                head_spr.node.active = true;
                /** 通过头像链接加载头像，成功更新头像显示并隐藏默认头像，失败则显示默认头像*/
                ResLoadHelper.loadAssetAsync(seat_data.user.icon, SpriteFrame, (frame: SpriteFrame) => {
                    if (frame) {
                        head_spr.spriteFrame = frame;
                    } else {
                        head_default.active = true;
                        head_spr.node.active = false;
                    }
                }, true);
            } else {
                p.active = false;
                nameLabel.string = "";
            }
        }
    }

    private playPlayerAnim() {
        Tween.stopAllByTarget(this.p_left);
        Tween.stopAllByTarget(this.p_right);
        this.p_left.setPosition(v3(-660, 200, 0));
        this.p_right.setPosition(v3(660, 200, 0));
        let anim_time = 0.15;
        tween(this.p_left).to(anim_time, { position: v3(-250, 200, 0) }, { easing: easing.backIn }).start();
        tween(this.p_right).to(anim_time, { position: v3(250, 200, 0) }, { easing: easing.backIn }).start();
    }

    private enterGame() {
        this.anim_fx_vs.node.active = false;
        // this.anim_vs.node.active = false;
        // this.vs_node.active = true;


        this.onClick_closeBtn();
        App.view.openView(ViewName.Single.eModel2View);
    }
}


